<!-- 文章评论区 -->
<template>
  <div class="comment-body">
    <div class="comment-title">
      <div class="title">
        评论
        <!-- 评论的数量 -->
        <span class="count">{{ commentListInfo.totalCount }}</span>
      </div>
      <div class="tab">
        <span @click="orderChange(0)" :class="['tab-item', orderType == 0 ? 'active' : '']">热榜</span>
        <!-- 竖线 -->
        <el-divider direction="vertical"></el-divider>
        <span @click="orderChange(1)" :class="['tab-item', orderType == 1 ? 'active' : '']">最新</span>
      </div>
    </div>
    <!-- 发送评论 -->
    <div class="comment-form-panel">
      <CommentPost :avatarWidth="50" :userId="currentUserInfo.userId" :showInsertImg="currentUserInfo.userId !== null"
        :articleId="articleId" :pCommentId="0" @postCommentFinish="postCommentFinish" />
    </div>
    <div class="comment-list">
      <DataList :dataSource="commentListInfo" :loading="loading" @loadData="loadComment" noDataMsg="暂无评论，赶紧占沙发吧！">
        <template #default="{ data }">
          <CommentListItem :articleId="articleId" :commentData="data" :articleUserId="articleUserId"
            :currentUserId="currentUserInfo.userId" @hiddenAllReply="hiddenAllReplyHandler" @reloadData="loadComment"/>
        </template>
      </DataList>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch, defineEmits } from "vue";
import { useStore } from "vuex";
import CommentListItem from "./CommentListItem.vue";
import CommentPost from "./CommentPost.vue";
const { proxy } = getCurrentInstance();
const store = useStore();
const props = defineProps({
  articleId: {
    type: String,
  },
  // 文章作者
  articleUserId: {
    type: String,
  },
});
const api = {
  loadComment: "/comment/loadComment",
  doLike: "/comment/doLike",
  changeTopType: "/comment/changeTopType",
  postComment: "/comment/postComment"
};

//用户信息
const currentUserInfo = ref({});
watch(
  () => store.state.loginUserInfo,
  (newVal, oldVal) => {
    currentUserInfo.value = newVal || {};
  },
  { immediate: true, deep: true }
);

//排序
const orderType = ref(0);
const orderChange = (type) => {
  orderType.value = type;
  loadComment();
};
//评论列表
const loading = ref(null);
const commentListInfo = ref({});
const loadComment = async () => {
  let params = {
    pageNo: commentListInfo.value.pageNo,
    articleId: props.articleId,
    orderType: orderType.value,
  };
  loading.value = true;
  let result = await proxy.Request({
    url: api.loadComment,
    showLoading: false,
    params,
  });
  loading.value = false;
  if (!result) {
    return;
  }
  commentListInfo.value = result.data;
};
loadComment();

//隐藏所有回复框
const hiddenAllReplyHandler = () => {
  commentListInfo.value.list.forEach((element) => {
    element.showReply = false;
  });
  console.log(commentListInfo.value)
};

//发布评论
const postCommentFinish = (resultData) => {
  commentListInfo.value.list.unshift(resultData);
  //更新数量
  const totalCount = commentListInfo.value.totalCount + 1;
  commentListInfo.value.totalCount = totalCount;
  emit("updateCommentCount", totalCount);
};
const emit = defineEmits(["updateCommentCount"]);
</script>

<style lang="scss" scoped>
.comment-body {
  .comment-title {
    display: flex;
    align-items: center;

    .title {
      font-size: 20px;

      .count {
        font-size: 14px;
        padding: 0px 10px;
      }
    }

    .tab {
      .tab-item {
        cursor: pointer;
      }

      .active {
        color: var(--link);
      }
    }
  }

  .comment-form-panel {
    margin-top: 20px;
  }
}
</style>